<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <section class="card">
      <div class="bottom">
        <div class="shang">2</div>
        <div class="xia">1</div>
      </div>
      <div class="fliping">
        <div class="front">1</div>
        <div class="back">2</div>
      </div>
    </section> -->

    <section class="card">
      <div class="bottom">
        <div class="shang"></div>
        <div class="xia"></div>
      </div>
      <div class="fliping">
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </section>
    <style>
      .card {
        width: 100px;
        height: 200px;
        background-color: lightblue;
        position: relative;
        transform-style: preserve-3d;
        perspective: 500px;
      }
      .card .bottom,
      .card .bottom .shang,
      .card .bottom .xia,
      .card .fliping,
      .card .fliping .front,
      .card .fliping .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 100px;
      }
      .card .bottom {
        transform-style: preserve-3d;
      }

      .card .bottom .shang {
        transform: rotateX(-1deg);
      }
      .card .bottom .xia {
        transform: rotateX(1deg);
      }

      .card .fliping {
        font-size: 100px;
        transform: rotateX(-1deg);
        /* backface-visibility: hidden; */
        transform-style: preserve-3d;
        transition-property: transform;
        /* box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); */
      }
      .card .fliping .front,
      .card .fliping .back {
        background-color: rgb(219, 128, 23);
      }
      .card .fliping .front {
        z-index: 1;
      }
      .card .fliping .back {
        z-index: 2;
        transform: rotateX(180deg);
      }
    </style>

    <script>
      let shang = document.querySelector(".shang");
      let xia = document.querySelector(".xia");
      let front = document.querySelector(".front");
      let back = document.querySelector(".back");
      let fliping = document.querySelector(".fliping");

      setInterval(() => {
        fliping.style.transitionDuration = "0.6s";
        fliping.style.transform = "rotateX(-179deg)";

        fliping.ontransitionend = function () {
          let s = Number(new Date().getSeconds().toString().slice(-1));
          let os = s - 1;
          if (os < 0) {
            os = 9;
          }
          console.log("end", os, s);
          fliping.style.transitionDuration = "0s";
          fliping.style.transform = "rotateX(-1deg)";

          shang.innerText = s;
          xia.innerText = os;
          front.innerText = os;
          back.innerText = s;
        };
      }, 1000);
    </script>
  </body>
</html>
